<ion-view title={{group.name}}> 
<ion-nav-buttons side="right">
        <button class=" button button-positive ink-button button-fab button-riased" ng-click="showManageUserActionsheet()"><i class="icon ion-edit"></i></button>
</ion-nav-buttons>           
<ion-pane>
   <ion-tabs class="tabs-striped tabs-positive">
        <ion-tab title="Expenses">
            <ion-nav-bar class="bar-positive"></ion-nav-bar>
            <ion-content padding="true" class="has-header">
            <div class="bar item bar-positive "><div class="col center"><b>Expenses</b></div>
            <i class="icon ion-funnel badge" ng-click="togglesearch()"></i></div>
            <div class="item-input" ng-show="true">
    				<i class="icon ion-ios-search placeholder-icon"></i>
    				<input type="search" placeholder="type expense name, amount or spender's name" ng-model="searchText">
    		</div> 
            <ion-list>
                <ion-item class="item-icon-left" ng-repeat="expense in expenses | filter:searchText"   href="#app/listexpenses/{{expense.id}}">
                    <i class="ion-android-document icon item-text-wrap positive"></i>
                    <h2> {{expense.name}}</h2>
                    <p><i class="ion-ios-people item-text-wrap positive"></i> {{expense.payerstring}}</p>
                    <b class="badge dark">{{expense.amount.toFixed(0)}}</b>
                    <ion-option-button class="button-positive icon ion-ios-trash"ng-click="showexpensedetails(expense)"></ion-option-button>
                </ion-item>
            </ion-list>
            </ion-content>
        </ion-tab>
        <ion-tab title="Users">
            <ion-nav-bar class="bar-positive"></ion-nav-bar>
            <ion-content padding="true" class="has-header">
            <div class="bar bar-positive item"><div class="col center"><b>Balances</b></div></div>
             
                <ion-item ng-repeat="user in users | filter:searchText"  class="item" >
                <div class="row" ng-click="toggleUserEntry(user)">
                    <div class="col bold"> {{user.name}}</div>
                    <div class="col center col-15"><b ng-class="(user.payments - user.spends+user.settlemetnspaid-user.settlemetnsrecieved)>0 ? 'balanced' : 'assertive'">{{(user.payments - user.spends+user.settlemetnspaid-user.settlemetnsrecieved).toFixed(2)}}</b></div>
                </div> 
                <div ng-show="isUserExpanded(user)">
                <ion-list>
            		 <div class="item">
            		 	<p>Tot. Payments :</p> 
            		 	<div class="badge dark">+ {{user.payments.toFixed(2)}}</div>
            		 </div>
            		 <div class="item">
            		 	<p>Tot. Expenses : </p>
            		 	<div class="badge dark">- {{user.spends.toFixed(2)}}</div>
            		 </div>
                     <div class="item">
                        <p>Settlemetns recieved / paid :</p>
                        <div class="badge dark"> {{(user.settlemetnspaid-user.settlemetnsrecieved).toFixed(2)}}</div>
                     </div>
                     <div class="item item-text-wrap">
                        <p class="item-text-wrap">Balance before settlements : </p>
                        <div class="badge dark"> {{(user.payments - user.spends).toFixed(2)}}</div>
                     </div>
                <ion-list>
                </div>
            </ion-item>
            </ion-content>
        </ion-tab>
        <ion-tab title="Summary"  on-select="getsuggestions()" delegate-handle="summary-tab">
            <ion-nav-bar class="bar-positive"></ion-nav-bar>
            <ion-content padding="true" class="has-header">
            <ion-refresher on-refresh="doRefresh()"></ion-refresher>
            <div class="bar bar-positive item"><span class="col center"><b>Summary</b></span></div>
            <div class="row ">
                <span class="col col-80 positive"><b> Totals expenditure : </b></span><span class="col col-20 assertive"><b>- {{(total_exp).toFixed(2)}}</b></span>
            </div>
            
            <div class="bar bar-positive item"><div class="col center"><b>Pending Settlements </b></div></div>
            <ion-list>
            <div class="item" ng-repeat="suggestion in suggestions" class="item" ng-click="showActionsheet(suggestion)">
                    <span > {{suggestion.from.name}}  <i class="ion-arrow-right-c positive"></i>  {{suggestion.to.name}} </span>
                    <span class="badge center positive"><b>{{suggestion.amt.toFixed(2)}}</b></span>
            </div>
            <div class="row" ng-show="{{suggestions.length}}==0"><p class="col">No pending settlements<p></div>
            </ion-list>
            <div class="bar item bar-positive"><div class="col center"><b>Completed Settlements</b></div></div>
            <ion-list>
            <div class="item" ng-repeat="settlement in settlements">
                    <span > {{settlement.from.name}}  <i class="ion-arrow-right-c positive"></i>  {{settlement.to.name}} </span>
                    <span class="badge center positive"><b>{{settlement.amount.toFixed(2)}}</b></span>
            </div>
            </ion-list>
            </ion-content>
        </ion-tab>
    </ion-tabs>
    </ion-pane>
</ion-view>
